<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
  <meta charset="utf-8">
  <title>Zen 7.x-6.x Style Guide</title>

  <meta name="description" content="">
  <meta name="generator" content="kss-node">
  <meta name="viewport" content="width=device-width">

  <link rel="stylesheet" href="kss-assets/kss.css">
  <link rel="stylesheet" href="../css/styles.css">
<link rel="stylesheet" href="../css/style-guide/chroma-kss-styles.css">
<link rel="stylesheet" href="../css/style-guide/kss-only.css">

</head>
<body id="kss-node">

<div class="kss-sidebar kss-style">
  <header class="kss-header">
    <h1 class="kss-doc-title">Zen 7.x-6.x Style Guide</h1>
  </header>
  <nav class="kss-nav">
    <ul class="kss-nav__menu">
      <li class="kss-nav__menu-item">
        <a class="kss-nav__menu-link" href="./">
          <span class="kss-nav__ref">0</span
          ><span class="kss-nav__name">Overview</span>
        </a>
      </li>
          <li class="kss-nav__menu-item">
        <a class="kss-nav__menu-link" href="section-sass.html">
          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Colors and Sass</span>
        </a>
                  <ul class="kss-nav__menu-child">
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-colors">
                <span class="kss-nav__ref ">1.1</span
                ><span class="kss-nav__name">Colors</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-init">
                <span class="kss-nav__ref ">1.2</span
                ><span class="kss-nav__name">Initialization partial</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-modules">
                <span class="kss-nav__ref ">1.3</span
                ><span class="kss-nav__name">3rd party libraries</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-variables">
                <span class="kss-nav__ref ">1.4</span
                ><span class="kss-nav__name">Variables</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-variables-breakpoints">
                <span class="kss-nav__ref kss-nav__ref-child">1.4.1</span
                ><span class="kss-nav__name">Breakpoints</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-variables-support-for">
                <span class="kss-nav__ref kss-nav__ref-child">1.4.2</span
                ><span class="kss-nav__name">Browser support</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-variables-typey">
                <span class="kss-nav__ref kss-nav__ref-child">1.4.3</span
                ><span class="kss-nav__name">Font faces, stacks and sizes.</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-variables-zen-grids">
                <span class="kss-nav__ref kss-nav__ref-child">1.4.4</span
                ><span class="kss-nav__name">Zen grids</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-variables-misc">
                <span class="kss-nav__ref kss-nav__ref-child">1.4.5</span
                ><span class="kss-nav__name">Miscellaneous variables</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-functions">
                <span class="kss-nav__ref ">1.5</span
                ><span class="kss-nav__name">Functions</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-mixins">
                <span class="kss-nav__ref ">1.6</span
                ><span class="kss-nav__name">Mixins</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-mixins-clearfix">
                <span class="kss-nav__ref kss-nav__ref-child">1.6.1</span
                ><span class="kss-nav__name">clearfix()</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-mixins-image-url">
                <span class="kss-nav__ref kss-nav__ref-child">1.6.2</span
                ><span class="kss-nav__name">image-url()</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-mixins-rtl">
                <span class="kss-nav__ref kss-nav__ref-child">1.6.3</span
                ><span class="kss-nav__name">rtl()</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-mixins-visually-hidden">
                <span class="kss-nav__ref kss-nav__ref-child">1.6.4</span
                ><span class="kss-nav__name">visually-hidden()</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-mixins-visually-hidden--focusable">
                <span class="kss-nav__ref kss-nav__ref-child">1.6.5</span
                ><span class="kss-nav__name">visually-hidden--focusable()</span>
              </a>
            </li>
                      <li class="kss-nav__menu-item">
              <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-mixins-visually-hidden--off">
                <span class="kss-nav__ref kss-nav__ref-child">1.6.6</span
                ><span class="kss-nav__name">visually-hidden--off()</span>
              </a>
            </li>
                    </ul>
              </li>
          <li class="kss-nav__menu-item">
        <a class="kss-nav__menu-link" href="section-base.html">
          <span class="kss-nav__ref">2</span><span class="kss-nav__name">Defaults</span>
        </a>
              </li>
          <li class="kss-nav__menu-item">
        <a class="kss-nav__menu-link" href="section-layouts.html">
          <span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
        </a>
              </li>
          <li class="kss-nav__menu-item">
        <a class="kss-nav__menu-link" href="section-components.html">
          <span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
        </a>
              </li>
          <li class="kss-nav__menu-item">
        <a class="kss-nav__menu-link" href="section-navigation.html">
          <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
        </a>
              </li>
          <li class="kss-nav__menu-item">
        <a class="kss-nav__menu-link" href="section-forms.html">
          <span class="kss-nav__ref">6</span><span class="kss-nav__name">Forms</span>
        </a>
              </li>
        </ul>
  </nav>
</div>
<article role="main" class="kss-main">

  
          <div id="kssref-sass" class="kss-section kss-section--depth-1">
      <div class="kss-style">
                <h1 class="kss-title kss-title--level-1">
          <a class="kss-title__permalink" href="#kssref-sass">
            <span class="kss-title__ref">
              1
              <span class="kss-title__permalink-hash">
                sass
              </span>
            </span>
            Colors and Sass
          </a>
        </h1>

                  <div class="kss-description">
            <p>Documentation for colors and Sass mixins and variables.</p>

          </div>
        
              </div>

      
              <div class="kss-source kss-style">
          Source: <code>styles.scss</code>, line 8
        </div>
          </div>
          <section id="kssref-sass-colors" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-sass-colors">
            <span class="kss-title__ref">
              1.1
              <span class="kss-title__permalink-hash">
                sass.colors
              </span>
            </span>
            Colors
          </a>
        </h2>

                  <div class="kss-description">
            <p>Use the <code>color()</code> function to add colors to CSS properties. To learn more,
<a href="http://johnalbin.github.io/chroma/">read the Chroma documentation</a>.</p>

          </div>
        
              </div>

              <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example          </div>

          
          <div class="kss-modifier__example">
            <!-- This markup is auto-generated from Sass with chroma-kss-markup(). Do not modify. --><div class="kss-style"><h3 class="chroma-kss__title">branding</h3><p class="chroma-kss__description">The site's main colors. Can be used to define colors in other color schemes.</p><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(black)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code></span> <span class="chroma-kss__reference">This color is inherited by: grey-dark, grey, grey-light, grey-extra-light, text, border, autocomplete, button, button-disabled, fieldset-summary, menu-active, progress-bar-bg, progress-bar-border, resizable-grippie, row-stripe, row-disabled, skip-link-bg, status-highlight, warning, tabs-border, tab, tab-bg, tab-secondary, watermark</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666666"></span><code class="chroma-kss__variable">color(grey-dark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666666</code> (black)</span> <span class="chroma-kss__reference">This color is inherited by: progress-bar-border, skip-link-bg, tab-secondary</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #999999"></span><code class="chroma-kss__variable">color(grey)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#999999</code> (black)</span> <span class="chroma-kss__reference">This color is inherited by: button-disabled, fieldset-summary</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #cccccc"></span><code class="chroma-kss__variable">color(grey-light)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#cccccc</code> (black)</span> <span class="chroma-kss__reference">This color is inherited by: border, progress-bar-bg, row-disabled, tabs-border, tab-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #eeeeee"></span><code class="chroma-kss__variable">color(grey-extra-light)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#eeeeee</code> (black)</span> <span class="chroma-kss__reference">This color is inherited by: resizable-grippie, row-stripe, watermark</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(white)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code></span> <span class="chroma-kss__reference">This color is inherited by: text-bg, autocomplete-bg, autocomplete-select, body-bg, skip-link, tabs-bg, tab-text-shadow</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0072b9"></span><code class="chroma-kss__variable">color(blue)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#0072b9</code></span> <span class="chroma-kss__reference">This color is inherited by: link, link-visited, autocomplete-select-bg, progress-bar, status, status-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #c00"></span><code class="chroma-kss__variable">color(red)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#c00</code></span> <span class="chroma-kss__reference">This color is inherited by: link-active, form-error, mark-highlight, error, error-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fd0"></span><code class="chroma-kss__variable">color(yellow)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fd0</code></span> <span class="chroma-kss__reference">This color is inherited by: mark-bg, preview-bg, warning-bg, warning-border, table-drag, table-select</span></div><h3 class="chroma-kss__title">functional</h3><p class="chroma-kss__description">Colors used by functional parts of the design.</p><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(text)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (black)</span> <span class="chroma-kss__reference">This color is inherited by: autocomplete, button, menu-active, status-highlight, warning, tab</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(text-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (white)</span> <span class="chroma-kss__reference">This color is inherited by: autocomplete-bg, body-bg, tabs-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0072b9"></span><code class="chroma-kss__variable">color(link)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#0072b9</code> (blue)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #003353"></span><code class="chroma-kss__variable">color(link-visited)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#003353</code> (blue)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #c00"></span><code class="chroma-kss__variable">color(link-active)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#c00</code> (red)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #cccccc"></span><code class="chroma-kss__variable">color(border)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#cccccc</code> (grey-light)</span> <span class="chroma-kss__reference">This color is inherited by: tabs-border</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(autocomplete)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(autocomplete-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (text-bg)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(autocomplete-select)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (white)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0072b9"></span><code class="chroma-kss__variable">color(autocomplete-select-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#0072b9</code> (blue)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(body-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (text-bg)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(button)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #999999"></span><code class="chroma-kss__variable">color(button-disabled)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#999999</code> (grey)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #999999"></span><code class="chroma-kss__variable">color(fieldset-summary)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#999999</code> (grey)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #c00"></span><code class="chroma-kss__variable">color(form-error)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#c00</code> (red)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #c00"></span><code class="chroma-kss__variable">color(mark-highlight)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#c00</code> (red)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fd0"></span><code class="chroma-kss__variable">color(mark-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fd0</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(menu-active)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fffadb"></span><code class="chroma-kss__variable">color(preview-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fffadb</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0072b9"></span><code class="chroma-kss__variable">color(progress-bar)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#0072b9</code> (blue)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #cccccc"></span><code class="chroma-kss__variable">color(progress-bar-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#cccccc</code> (grey-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666666"></span><code class="chroma-kss__variable">color(progress-bar-border)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666666</code> (grey-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #eeeeee"></span><code class="chroma-kss__variable">color(resizable-grippie)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#eeeeee</code> (grey-extra-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #eeeeee"></span><code class="chroma-kss__variable">color(row-stripe)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#eeeeee</code> (grey-extra-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #cccccc"></span><code class="chroma-kss__variable">color(row-disabled)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#cccccc</code> (grey-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(skip-link)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (white)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666666"></span><code class="chroma-kss__variable">color(skip-link-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666666</code> (grey-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0072b9"></span><code class="chroma-kss__variable">color(status)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#0072b9</code> (blue)</span> <span class="chroma-kss__reference">This color is inherited by: status-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f6fcff"></span><code class="chroma-kss__variable">color(status-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f6fcff</code> (status)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(status-highlight)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(warning)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fffce6"></span><code class="chroma-kss__variable">color(warning-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fffce6</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fd0"></span><code class="chroma-kss__variable">color(warning-border)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fd0</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #c00"></span><code class="chroma-kss__variable">color(error)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#c00</code> (red)</span> <span class="chroma-kss__reference">This color is inherited by: error-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff0f0"></span><code class="chroma-kss__variable">color(error-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff0f0</code> (error)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #cccccc"></span><code class="chroma-kss__variable">color(tabs-border)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#cccccc</code> (border)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(tabs-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (text-bg)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(tab)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(tab-text-shadow)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (white)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #dddddd"></span><code class="chroma-kss__variable">color(tab-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#dddddd</code> (grey-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666666"></span><code class="chroma-kss__variable">color(tab-secondary)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666666</code> (grey-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fffadb"></span><code class="chroma-kss__variable">color(table-drag)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fffadb</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fffdf0"></span><code class="chroma-kss__variable">color(table-select)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fffdf0</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #eeeeee"></span><code class="chroma-kss__variable">color(watermark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#eeeeee</code> (grey-extra-light)</span></div></div>

          </div>

                  </div>
              
              <div class="kss-source kss-style">
          Source: <code>init/_colors.scss</code>, line 3
        </div>
          </section>
          <section id="kssref-sass-init" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-sass-init">
            <span class="kss-title__ref">
              1.2
              <span class="kss-title__permalink-hash">
                sass.init
              </span>
            </span>
            Initialization partial
          </a>
        </h2>

                  <div class="kss-description">
            <p>To make it easier to use all variables and mixins in any Sass file in this
project, each .scss file has a <code>@import &#39;init&#39;;</code> declaration. The _init.scss
file is in charge of importing all the other partials needed for the
project.</p>
<p>The initialization partial is organized in this way:</p>
<ul>
<li>First we set any shared Sass variables.</li>
<li>Next we import Sass modules.</li>
<li>Last we define our custom mixins for this project.</li>
</ul>

          </div>
        
              </div>

      
              <div class="kss-source kss-style">
          Source: <code>_init.scss</code>, line 1
        </div>
          </section>
          <section id="kssref-sass-modules" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-sass-modules">
            <span class="kss-title__ref">
              1.3
              <span class="kss-title__permalink-hash">
                sass.modules
              </span>
            </span>
            3rd party libraries
          </a>
        </h2>

                  <div class="kss-description">
            <p>The following sass modules are shared with all .scss files:</p>
<ul>
<li><a href="http://breakpoint-sass.com/">Breakpoint</a></li>
<li><a href="https://github.com/JohnAlbin/chroma">Chroma</a></li>
<li><a href="https://github.com/JohnAlbin/support-for">Support-for</a></li>
<li><a href="https://github.com/jptaranto/typey">Typey</a></li>
<li><a href="http://zengrids.com/help/">Zen Grids</a></li>
</ul>
<p>Additional pre-built libraries can be found on the <a href="http://www.sache.in/">Sache website</a>.</p>

          </div>
        
              </div>

      
              <div class="kss-source kss-style">
          Source: <code>_init.scss</code>, line 27
        </div>
          </section>
          <section id="kssref-sass-variables" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-sass-variables">
            <span class="kss-title__ref">
              1.4
              <span class="kss-title__permalink-hash">
                sass.variables
              </span>
            </span>
            Variables
          </a>
        </h2>

                  <div class="kss-description">
            <p>Set variables for this site before a library sets its !default value.</p>

          </div>
        
              </div>

      
              <div class="kss-source kss-style">
          Source: <code>init/_variables.scss</code>, line 1
        </div>
          </section>
          <section id="kssref-sass-variables-breakpoints" class="kss-section kss-section--depth-3">
      <div class="kss-style">
                <h3 class="kss-title kss-title--level-3">
          <a class="kss-title__permalink" href="#kssref-sass-variables-breakpoints">
            <span class="kss-title__ref">
              1.4.1
              <span class="kss-title__permalink-hash">
                sass.variables.breakpoints
              </span>
            </span>
            Breakpoints
          </a>
        </h3>

                  <div class="kss-description">
            <p>Use the <code>respond-to()</code> mixin to use named breakpoints. Documentation is
available in the <a href="https://github.com/at-import/breakpoint/wiki/Respond-To">Breakpoint wiki
pages</a>.</p>

          </div>
        
              </div>

      
              <div class="kss-source kss-style">
          Source: <code>init/_variables.scss</code>, line 114
        </div>
          </section>
          <section id="kssref-sass-variables-support-for" class="kss-section kss-section--depth-3">
      <div class="kss-style">
                <h3 class="kss-title kss-title--level-3">
          <a class="kss-title__permalink" href="#kssref-sass-variables-support-for">
            <span class="kss-title__ref">
              1.4.2
              <span class="kss-title__permalink-hash">
                sass.variables.support-for
              </span>
            </span>
            Browser support
          </a>
        </h3>

                  <div class="kss-description">
            <p>For older versions of browsers, some Sass relies on the <code>support-for()</code> to
control whether extra CSS is needed to be output. The <code>support-for()</code>
function and the <code>$support-for</code> variable are documented on the <a href="https://github.com/JohnAlbin/support-for">support-for
homepage</a>.</p>

          </div>
        
              </div>

      
              <div class="kss-source kss-style">
          Source: <code>init/_variables.scss</code>, line 8
        </div>
          </section>
          <section id="kssref-sass-variables-typey" class="kss-section kss-section--depth-3">
      <div class="kss-style">
                <h3 class="kss-title kss-title--level-3">
          <a class="kss-title__permalink" href="#kssref-sass-variables-typey">
            <span class="kss-title__ref">
              1.4.3
              <span class="kss-title__permalink-hash">
                sass.variables.typey
              </span>
            </span>
            Font faces, stacks and sizes.
          </a>
        </h3>

                  <div class="kss-description">
            <p>Font styling and line heights are controlled by the several variables that
used by mixins like <code>type-layout()</code>, <code>margin-top()</code>, and <code>margin-bottom()</code>.
These variable and mixins are documented on the <a href="https://github.com/jptaranto/typey">Typey
homepage</a>.</p>

          </div>
        
              </div>

      
              <div class="kss-source kss-style">
          Source: <code>init/_variables.scss</code>, line 27
        </div>
          </section>
          <section id="kssref-sass-variables-zen-grids" class="kss-section kss-section--depth-3">
      <div class="kss-style">
                <h3 class="kss-title kss-title--level-3">
          <a class="kss-title__permalink" href="#kssref-sass-variables-zen-grids">
            <span class="kss-title__ref">
              1.4.4
              <span class="kss-title__permalink-hash">
                sass.variables.zen-grids
              </span>
            </span>
            Zen grids
          </a>
        </h3>

                  <div class="kss-description">
            <p>The default grid system is built using the Zen Grids sass module. Full
documentation is available on the <a href="http://zengrids.com/">Zen Grids website</a>.</p>
<p>Note: if you are more comfortable using another grid system, you can easily
remove Zen Grids and its layouts.</p>

          </div>
        
              </div>

      
              <div class="kss-source kss-style">
          Source: <code>init/_variables.scss</code>, line 136
        </div>
          </section>
          <section id="kssref-sass-variables-misc" class="kss-section kss-section--depth-3">
      <div class="kss-style">
                <h3 class="kss-title kss-title--level-3">
          <a class="kss-title__permalink" href="#kssref-sass-variables-misc">
            <span class="kss-title__ref">
              1.4.5
              <span class="kss-title__permalink-hash">
                sass.variables.misc
              </span>
            </span>
            Miscellaneous variables
          </a>
        </h3>

                  <div class="kss-description">
            <p><code>$indent-amount</code> controls the amount lists, blockquotes and comments are indented.</p>
<p><code>$include-rtl</code> controls whether RTL styles are output. Rather than include a separate <code>*-rtl.css</code> file, Zen 6 uses Drupal 8&#39;s standard <code>[dir=&quot;rtl&quot;]</code> selector for RTL language support.</p>

          </div>
        
              </div>

      
              <div class="kss-source kss-style">
          Source: <code>init/_variables.scss</code>, line 175
        </div>
          </section>
          <section id="kssref-sass-functions" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-sass-functions">
            <span class="kss-title__ref">
              1.5
              <span class="kss-title__permalink-hash">
                sass.functions
              </span>
            </span>
            Functions
          </a>
        </h2>

                  <div class="kss-description">
            <p>Custom functions used on this site.</p>

          </div>
        
              </div>

      
              <div class="kss-source kss-style">
          Source: <code>_init.scss</code>, line 62
        </div>
          </section>
          <section id="kssref-sass-mixins" class="kss-section kss-section--depth-2">
      <div class="kss-style">
                <h2 class="kss-title kss-title--level-2">
          <a class="kss-title__permalink" href="#kssref-sass-mixins">
            <span class="kss-title__ref">
              1.6
              <span class="kss-title__permalink-hash">
                sass.mixins
              </span>
            </span>
            Mixins
          </a>
        </h2>

                  <div class="kss-description">
            <p>Custom mixins used on this site.</p>

          </div>
        
              </div>

      
              <div class="kss-source kss-style">
          Source: <code>_init.scss</code>, line 51
        </div>
          </section>
          <section id="kssref-sass-mixins-clearfix" class="kss-section kss-section--depth-3">
      <div class="kss-style">
                <h3 class="kss-title kss-title--level-3">
          <a class="kss-title__permalink" href="#kssref-sass-mixins-clearfix">
            <span class="kss-title__ref">
              1.6.1
              <span class="kss-title__permalink-hash">
                sass.mixins.clearfix
              </span>
            </span>
            clearfix()
          </a>
        </h3>

                  <div class="kss-description">
            <p>Allows the bottom of an element to extend to the bottom of all floated
children elements. @see <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://nicolasgallagher.com/micro-clearfix-hack/</a></p>
<p>We use the micro-clearfix, optimized for use in <code>@extend</code> where fewer <code>&amp;</code> is
better.</p>

          </div>
        
              </div>

      
              <div class="kss-source kss-style">
          Source: <code>init/clearfix/_clearfix.scss</code>, line 1
        </div>
          </section>
          <section id="kssref-sass-mixins-image-url" class="kss-section kss-section--depth-3">
      <div class="kss-style">
                <h3 class="kss-title kss-title--level-3">
          <a class="kss-title__permalink" href="#kssref-sass-mixins-image-url">
            <span class="kss-title__ref">
              1.6.2
              <span class="kss-title__permalink-hash">
                sass.mixins.image-url
              </span>
            </span>
            image-url()
          </a>
        </h3>

                  <div class="kss-description">
            <p>If you include your images next to your component Sass files, you need to
specify a url() to point from the generated CSS to the Sass source like this:</p>
<pre><code class="lang-css">content: url(../sass/components/is-quite/long.svg);
</code></pre>
<p>With the <code>image-url()</code> function the path to all your components is assumed to
start with <code>../sass/components/</code> and you just need to give it the last, short
bit of the path in your Sass code like this:</p>
<pre><code class="lang-scss">content: image-url(is-quite/short.svg);
</code></pre>
<p>If you want to point at an image that is not in the components sub-directory
of your sass directory, you can override the default $subdirectory by
passing it in as the first parameter of <code>image-url()</code> like this:</p>
<pre><code class="lang-scss">content: image-url(base, grouping/blockquote.svg);
</code></pre>
<p>which would output <code>url(../sass/base/grouping/blockquote.svg)</code>.</p>

          </div>
        
                              <div class="kss-parameters__title">Parameters:</div>
            <ul class="kss-parameters">
                      <li class="kss-parameters__item">
              <div class="kss-parameters__name"><code>$subdirectory</code></div>
              <div class="kss-parameters__description">
                Optional. The relative path from the root of your Sass source to the sub-directory where components usually lie.
                                  <div class="kss-parameters__default-value">
                    Defaults to: <code>$image-url-subdirectory</code>
                  </div>
                              </div>
            </li>
                                        <li class="kss-parameters__item">
              <div class="kss-parameters__name"><code>$path</code></div>
              <div class="kss-parameters__description">
                Required. The path to the image relative to the <code>$subdirectory</code>.
                              </div>
            </li>
                                        <li class="kss-parameters__item">
              <div class="kss-parameters__name"><code>$path-to-source</code></div>
              <div class="kss-parameters__description">
                Optional. The relative path from the css build directory to the sass source directory.
                                  <div class="kss-parameters__default-value">
                    Defaults to: <code>$image-url-path-to-source</code>
                  </div>
                              </div>
            </li>
                      </ul>
                        </div>

      
              <div class="kss-source kss-style">
          Source: <code>init/image-url/_image-url.scss</code>, line 6
        </div>
          </section>
          <section id="kssref-sass-mixins-rtl" class="kss-section kss-section--depth-3">
      <div class="kss-style">
                <h3 class="kss-title kss-title--level-3">
          <a class="kss-title__permalink" href="#kssref-sass-mixins-rtl">
            <span class="kss-title__ref">
              1.6.3
              <span class="kss-title__permalink-hash">
                sass.mixins.rtl
              </span>
            </span>
            rtl()
          </a>
        </h3>

                  <div class="kss-description">
            <p>Includes Right-To-Left language support by adding a parent selector of
<code>[dir=&quot;rtl&quot;]</code>. Since the dir attribute is usually defined on the html element
of a page, using this mixin on a ruleset that matches the html element won&#39;t
work.</p>
<p>Can be turned off globally by setting <code>$include-rtl: false;</code>.</p>

          </div>
        
                              <div class="kss-parameters__title">Parameters:</div>
            <ul class="kss-parameters">
                      <li class="kss-parameters__item">
              <div class="kss-parameters__name"><code>$selector</code></div>
              <div class="kss-parameters__description">
                The RTL parent selector.
                                  <div class="kss-parameters__default-value">
                    Defaults to: <code>&#039;[dir=&quot;rtl&quot;]&#039;</code>
                  </div>
                              </div>
            </li>
                      </ul>
                        </div>

      
              <div class="kss-source kss-style">
          Source: <code>init/rtl/_rtl.scss</code>, line 3
        </div>
          </section>
          <section id="kssref-sass-mixins-visually-hidden" class="kss-section kss-section--depth-3">
      <div class="kss-style">
                <h3 class="kss-title kss-title--level-3">
          <a class="kss-title__permalink" href="#kssref-sass-mixins-visually-hidden">
            <span class="kss-title__ref">
              1.6.4
              <span class="kss-title__permalink-hash">
                sass.mixins.visually-hidden
              </span>
            </span>
            visually-hidden()
          </a>
        </h3>

                  <div class="kss-description">
            <p>Make an element visually hidden, but accessible to screen readers, etc.
@see <a href="http://snook.ca/archives/html_and_css/hiding-content-for-accessibility">http://snook.ca/archives/html_and_css/hiding-content-for-accessibility</a></p>

          </div>
        
              </div>

      
              <div class="kss-source kss-style">
          Source: <code>init/visually-hidden/_visually-hidden.scss</code>, line 3
        </div>
          </section>
          <section id="kssref-sass-mixins-visually-hidden--focusable" class="kss-section kss-section--depth-3">
      <div class="kss-style">
                <h3 class="kss-title kss-title--level-3">
          <a class="kss-title__permalink" href="#kssref-sass-mixins-visually-hidden--focusable">
            <span class="kss-title__ref">
              1.6.5
              <span class="kss-title__permalink-hash">
                sass.mixins.visually-hidden--focusable
              </span>
            </span>
            visually-hidden--focusable()
          </a>
        </h3>

                  <div class="kss-description">
            <p>Makes an element visually hidden by default, but visible when receiving
focus.</p>

          </div>
        
              </div>

      
              <div class="kss-source kss-style">
          Source: <code>init/visually-hidden/_visually-hidden.scss</code>, line 31
        </div>
          </section>
          <section id="kssref-sass-mixins-visually-hidden--off" class="kss-section kss-section--depth-3">
      <div class="kss-style">
                <h3 class="kss-title kss-title--level-3">
          <a class="kss-title__permalink" href="#kssref-sass-mixins-visually-hidden--off">
            <span class="kss-title__ref">
              1.6.6
              <span class="kss-title__permalink-hash">
                sass.mixins.visually-hidden--off
              </span>
            </span>
            visually-hidden--off()
          </a>
        </h3>

                  <div class="kss-description">
            <p>Turns off the visually-hidden effect.</p>

          </div>
        
              </div>

      
              <div class="kss-source kss-style">
          Source: <code>init/visually-hidden/_visually-hidden.scss</code>, line 18
        </div>
          </section>
  </article>

<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script>
  prettyPrint();
  var spy = new ScrollSpy('#kss-node', {
    nav: '.kss-nav__menu-child > li > a',
    className: 'is-in-viewport'
  });
</script>




<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>
